<template>
	<!-- 最外框 -->
	<div class="wrap">
		<!-- 左边导航条 -->
		<left />
		<!-- 顶title条 -->
		<top />

		<!-- 中间音乐区 -->
		<center />

		<!-- 底部播放器区域 -->
		<Footer />

	</div>
</template>
  
<script>
import left from './left.vue'
import top from './top.vue'
import center from './center.vue'
import Footer from './footer.vue'

export default {
	name: 'indexMain',
	data() {
		return {

		}
	},
	components: {
		left,
		top,
		center,
		Footer
	}
}
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
.wrap {
	width: 900px;
	height: 700px;
	margin: 30px auto;
	background: #eee;
	position: relative;
	padding-left: 210px;
}

/*左边导航条*/
.leftNav {
	width: 210px;
	height: 100%;
	background: #ddd;
	position: absolute;
	left: 0;
	top: 0;
}

/*顶title条*/
.indexTopTitle {
	width: 100%;
	height: 60px;
	background: #d39696;
}

/*中间音乐区*/
.musicArea {
	width: 100%;
	height: 570px;
	background: #916767;
}

/*底部播放器区域*/
.bottomPlayArea {
	width: 100%;
	height: 60px;
	background: #d39696;
}</style>
  